import React, { Component } from 'react';
class MoveAbout extends Component {
    constructor(props) {
        super(props);
    }
    // 秒杀倒计时
        state = {
        text: "未开始",
        color: "#00f",
        // 距离开始还有几秒
        start: "",
        // 结束还有几秒
        future: ""
    }
    // 倒计时
    time() {
        setInterval(() => {
            // 当前时间
            var ti = Date.parse(new Date()) / 1000 * 1
            if (ti > this.props.futureTime) {
                this.setState({ text: "已过期", color: "#999" })
            } else if (ti < this.props.startTime) {
                this.setState({ start: this.props.startTime - ti })
                this.setState({ text: "未开始", color: "#00f" })
            } else {
                this.setState({ future: this.props.futureTime - ti })
                this.setState({ text: "秒杀中", color: "#f00" })
            }
            // 重新赋值
            this.setState({ start: this.props.startTime - ti })
            this.setState({ future: this.props.futureTime - ti })
        }, 1000)
    }
    // 组件挂载 
    componentDidMount() {
        this.time()
    }

    render() {
        // 
        var color = this.state.color
        return (<div >
            <ul>
                <p style={{ "display": this.state.start <= 0 ? "none" : 'block' }}>还有&emsp;<span style={{ color: "#00f" }}>{this.state.start}</span>&emsp;秒开始秒杀！</p>
                <p style={{ "display": this.state.future <= 0 ? "none" : 'block' }}>还有&emsp;<span style={{ color: "#f00" }} >{this.state.future}</span>&emsp;秒结束！</p>
                <li style={{ color }}>{this.state.text}</li>
            </ul>
        </div>);
    }
}
// 导出组件
export default MoveAbout;